:root {
    --dtable-selected-color: var(--color-success-500);
    --dtable-selected-bg: var(--color-success-50);
    --dtable-selecting-bg: var(--color-success-100);
    --dtable-highlight-color: var(--color-success-700);
}
.dtable-selectable {
    user-select: none;
}
.dtable-cell.is-select::after {
    @apply -opacity-100 -border -border-[--dtable-selected-color] -z-10;
}
.dtable-cell.is-selecting {
    background: var(--dtable-selecting-bg);
}
.dtable-cell.is-selected {
    background: var(--dtable-selected-bg);
}
.dtable-cell.is-row-selected[data-col="INDEX"]::after,
.dtable-cell.is-col-selected::after {
    @apply -bg-inverse/5 -opacity-100;
}
.dtable-cell.has-cell-selected {
    @apply -text-[--dtable-highlight-color];
}
.dtable-cell.is-first-row.is-select::after {
    @apply -top-0;
}
.dtable-cell.is-last-row.is-select::after {
    @apply -bottom-px;
}
.dtable-cell.is-first-in-row.is-select::after {
    @apply -left-px;
}
.dtable-cell.is-last-in-row.is-select::after {
    @apply -right-px;
}
